<template>
  <div class="pagestyle">
    <list_controller :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }" ref="zujianname"
      :options="state.options" :showCaozuo="true">
      <template v-slot:selectNamelist> 实时分站信息列表 </template>
      <template v-slot:listSS="{ row, field }">
        <div v-if="field == 'durationTime'">{{computTime(row)}}</div>
        <div v-if="field == 'stationStatusStr'">{{row.stationStatusStr}}</div>
      </template>
      <template v-slot:listSSfilter="{ row, field }">
        <div v-if="field == 'stationStatusStr'">
          <el-checkbox-group v-model="state.statusListquery"
            style="display: flex;flex-direction: column;padding: 0 10px;">
            <el-checkbox v-for="city in ['正常',  '分站故障' ,  '初始化',
              '网络故障',  '重启',  '线路质量评估']" :key="city" :label="city" :value="city" @change="statuscheckboxChange">
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
    </list_controller>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  const {
    proxy
  } = getCurrentInstance();
  let state = reactive({
    statusListquery:['正常',  '分站故障' ,  '初始化',
              '网络故障',  '重启',  '线路质量评估'],
    detailsShow: false,
    detailsList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      refreshShow: true,
      tableheads: computed(() => table_headers.realStationInfo),
      listSS: [{
          field: "durationTime"
        },
        {
          field: "stationStatusStr",
          filterField: {
            field: "stationStatusStr",
            filterdiy: true, //自定义筛选表头
            options: []
          },
        }
      ],
      queryList: {
        querys: [],
      },
      dataUrl: "/realStationData/listStationInfo",
    },
    tempList: [],
    // 表单
    editId: undefined,
    drawerShow: false,
    pointDataList: [],
    targetTime: '',
  });

  function statuscheckboxChange(e) {
    proxy.$refs.zujianname.getData({
      statusList: state.statusListquery
    })
  }
  // 计算累计时间
  const computTime = (row) => {
    if (row.durationTime) {
      setInterval(() => {
        const now = new Date(); // 当前时间
        const target = new Date(row.prealarmStartTime); // 目标时间
        const diff = Math.abs(now - target); // 时间差（毫秒）
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
      }, 1000);
    } else {
      const now = new Date(); // 当前时间
      const target = new Date(row.prealarmStartTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }
    return row.durationTime
  }

</script>
<style lang="scss" scoped>
  .xiazai {
    position: absolute;
    top: 42px;
    right: 241px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  .pagestyle {
    display: flex;
    justify-content: space-between;
  }
</style>